<template>
  <div class="forget-wrap">

    <div class="forget-box">
      <div class="content-box">
        <div class="content-con">
          <span class="panel">手机号：</span>
          <div class="input-box">
            <input class="con" type="tel" maxlength="11" @blur="inputBlur" v-model="phone"/>
          </div>
        </div>

        <div class="content-con">
          <span class="panel">验证码：</span>
          <div class="code-con">
            <div class="code-box">
              <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" @blur="inputBlur"
                     v-model="code"/>
            </div>
            <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
          </div>
        </div>
      </div>

      <div class="btn-box" @click="nextPage">
        <button type="button" class="btn">下一步</button>
      </div>
    </div>

  </div>

</template>

<script>
  import code from "../../components/code"
  import {checkPhone, checkCode} from "../../config/verify"
  import {getToken, sendCode, mateCode} from '../../axios/api'

  export default {
    data() {
      return {
        phone: "",
        code: "",
        token1: "",
        token2: ""
      }
    },
    methods: {
      inputBlur() {
        window.scrollTo(0, 0);
      },
      sendCode() {//获取验证码
        let phone = this.phone;
        if (checkPhone(phone)) {
          let param1 = {
            "phone": phone,
            "i": 1
          };
          getToken(param1).then((res) => {//获取token
            this.token1 = res.data;

            let param2 = {
              "phone": phone,
              "i": 1,
              "userToken": this.token1
            };
            sendCode(param2).then((res) => {//发送验证码
              if (res.code == 0) {
                this.token2 = res.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              }
            });
          });
        }
      },
      nextPage() {//下一步
        let phone = this.phone;
        let code = this.code;
        if (checkPhone(phone) && checkCode(code)) {
          let param = {
            "phone": phone,
            "i": 1,
            "code": code,
            "token": this.token2
          };
          mateCode(param).then((res) => {//校验验证码
            if (res.code == 0) {
              this.$router.push({path: "/setPwd", query: {"phone": this.phone, "type": 1}});
            }
          });
        }
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .forget-wrap {
    .wh(100%, 100%);
    overflow: hidden;
    .content-box {
      margin: 0.867rem auto 0.867rem;
      .wh(9.2rem, auto);
      .content-con {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.48rem;
        &:last-child {
          margin-bottom: 1.6rem;
        }
        .panel {
          padding-bottom: 0.267rem;
          .size-color-weight(0.4rem, rgba(153, 153, 153, 1), 500);
        }
        .input-box {
          display: flex;
          align-items: center;
          .wh(9.2rem, 1.173rem);
          background: rgba(240, 243, 245, 1);
          .border-radius(0.107rem);
          .con {
            padding-left: 0.467rem;
            .wh(90%, 0.6rem);
            line-height: 0.6rem;
            background: rgba(240, 243, 245, 1);
            .size-color(0.48rem, rgba(51, 51, 51, 1));
          }
        }
        .code-con {
          .fj(space-between, center);
          .wh(100%, 1.173rem);
          .code-box {
            display: flex;
            align-items: center;
            .wh(5.707rem, 1.173rem);
            background: rgba(240, 243, 245, 1);
            .border-radius(0.107rem);
            .code {
              padding-left: 0.467rem;
              .wh(90%, 0.6rem);
              line-height: 0.6rem;
              background: rgba(240, 243, 245, 1);
              .size-color(0.48rem, rgba(51, 51, 51, 1));
            }
          }
          .mobile {
            margin-left: auto;
            .wh(3.2rem, 1.173rem);
            border: 0.027rem solid rgba(255, 143, 51, 1);
            .border-radius(0.107rem);
            .size-color-weight(0.4rem, rgba(255, 143, 51, 1), 500);
            background: @talent-bg-color;
          }
        }

      }
    }

    .btn-box {
      margin: 0 auto;
      .wh(7.2rem, 1.173rem);
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
